<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            margin-bottom: 40px;
        }

      
    </style>
</head>

<body>
    <!-- HTML属性的属性名只能是小写,如果写成大写会自动转化为小写 -->

    <div id="app">

        <!--  input:text  input:password 和 textarea 元素使用 value 属性 和 input 事件； -->
        <div class="wrap">
            <h2>text 和 textarea </h2>
            <p>
                <!-- <input type="text" v-model="msg"> -->
                <textarea v-model="msg" cols="30" rows="10"></textarea>
            </p>
            <p>
                msg: {{msg}}
            </p>
            <p>
                <button @click="msg = msg.toUpperCase()">change</button>
            </p>
        </div>


        <!-- checkbox 和 radio 使用 checked 属性 和 change 事件 -->
        <div class="wrap">
            <h2>单个复选框(是否选中)</h2>
            <p>
                <label>
                    <input type="checkbox" v-model="isAgree">
                    是否同意xxx协议?
                </label>
            </p>
            <p>isAgree: {{isAgree}}</p>
        </div>
        <div class="wrap">
            <h2>多个复选框(是否选中,将选中的value值放到数组)</h2>
            <p>
                爱好:
                <label><input type="checkbox" v-model="hobbyList" value="sing">唱</label>
                <label><input type="checkbox" v-model="hobbyList" value="dance">跳</label>
                <label><input type="checkbox" v-model="hobbyList" value="rap">rap</label>
                <label><input type="checkbox" v-model="hobbyList" value="basketball">篮球</label>
            </p>
            <p>hobbyList: {{hobbyList}}</p>
            <p><button @click="hobbyList=['basketball']">选中篮球</button></p>
        </div>

        <div class="wrap">
            <h2>多个单选(是否选中,将选中的value值存储挂载的数据)</h2>
            <p>
                性别:
                <label><input type="radio" name="sex" v-model="sex" value="man">男</label>
                <label><input type="radio" name="sex" v-model="sex" value="woman">女</label>
                <label><input type="radio" name="sex" v-model="sex" value="secret">保密</label>
            </p>
            <p>sex: {{sex}}</p>
            <p><button @click="sex='secret'">请保密</button></p>
        </div>


        <!--  select 字段将 value 作为 prop 并将 change 作为事件。 -->

        <div class="wrap">
            <h2>下拉框</h2>
            <p>
                年:
                <select v-model="year">
                    <option value="">请选择年份</option>
                    <option value="2001">2001</option>
                    <option value="2002">2002</option>
                    <option value="2003">2003</option>
                    <option value="2004">2004</option>
                    <option value="2005">2005</option>
                    <option value="2006">2006</option>
                    <option value="2007">2007</option>
                    <option value="2008">2008</option>
                    <option value="2009">2009</option>
                    <option value="2010">2010</option>
                    <option value="2011">2011</option>
                    <option value="2012">2012</option>
                    <option value="2013">2013</option>
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                </select>
                <select  v-model="month">
                    <option value="">请选择月份</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
            </p>
            <p>年份和月份: {{year}}年{{month}}月</p>
            <p><button @click="year=2024,month=3">改变年份和月份</button></p>
        </div>


    </div>
</body>
<script>

    /* 
        双向数据绑定
            1. 数据监听 当数据改变后,  重新更新视图
            2. DOM监听  当视图内容改变后,也会将其更新到数据    


        v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，

        v-model 会自动根据控件类型, 自动选取正确的属性和方法来更新元素
        v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

            text 和 textarea 元素使用 value 属性 和 input 事件；
            checkbox 和 radio 使用 checked 属性 和 change 事件；
            select 字段将 value 作为 prop 并将 change 作为事件。

       
    */




    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello world",
            isAgree:false,
            hobbyList: [],
            sex:"secret",


            year:"",
            month:""

        },
        methods: {

        }

    })

</script>

</html>